<template>
	<view class="convert-collection p-20">
		<u-navbar title="兑换码兑换" bgColor="#ffffff" safeAreaInsetTop :placeholder="true" leftIconColor="#000000"
			@leftClick="back" titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
			<view class="u-nav-slot f-base bold flex-no-horizontal" slot="right" @click="toConvert">
				<text class="bold f-base">兑换记录</text>
			</view>
		</u-navbar>
		<view class="m-b-30">
			<input placeholder="请输入兑换码" v-model="code" class="code-input" />
		</view>
		<u-button shape="circle" color="#000000" size="large" throttleTime="500" @click="convert">兑换</u-button>
		<view class="tip">
			<view class="f-xs m-b-15 text-center grey">如有兑换遇到问题请随时联系我们</view>
			<u-button shape="circle" class="tip-btn" @click="isShowService = true">
				<u-image class="m-r-5" src="../../static/img/convert-collection-kefu.png" width="13" height="13">
				</u-image>
				<text class="f-xs">点击联系客服</text>
			</u-button>
		</view>
		<u-popup :show="isShowService" round="10" mode="center" @close="isShowService = false">
			<view class="my-popup">
				<view class="text-center f-xl m-b-10 bold">联系我们</view>
				<view class="f-base text-center grey grey m-b-20">扫描下方二维码联系客服<br>
					我们将第一时间与您取得联系
				</view>
				<view class="text-center m-b-20">
					<image class="service-img" :src="configData.service_image" @longpress="saveImage"></image>
				</view>
				<view class="text-center grey f-xxs">长按保存图片</view>
				<u-icon name="close-circle" color="white" size="34" class="close" @click="isShowService = false">
				</u-icon>
			</view>
		</u-popup>
		<u-popup :show="isShowAttested" round="10" mode="center" @close="isShowAttested = false">
			<view class="my-popup">
				<view class="text-center m-t-5">
					<image src="../../static/img/attested-icon.png" class="attested-icon"></image>
				</view>
				<view class="text-center bold f-xl m-t-10 m-b-10">无法使用兑换码</view>
				<view class="f-base text-center m-b-30">请先完成实名认证后使用</view>
				<u-button color="#000000" shape="circle" @click="toPage">前往实名</u-button>
				<view class="f-xxs text-center grey m-t-15">根据国家相关法律要求<br>
					未完成实名认证不可获得藏品</view>
			</view>
		</u-popup>
		<u-popup :show="isShowGet" mode="center" round="10" @close="isShowGet = false" overlayOpacity="0.9">
			<view class="my-popup get">
				<view class="titleName">
					<view class="text-center f-base m-b-10">兑换成功</view>
					<!-- {{data.title}} -->
					<view class="f-xl title m-b-20 text-center bold">{{data.title}}</view>
				</view>
				<!-- <view class="text-center textsBckImg" style="background-image: url(../../static/img/convert-collection-light.png);`" >
				</view> -->
				<view class="light">
					<view class="lightImg">
						<image src="../../static/img/convert-collection-light.png"></image>
					</view>
					<view class="collectionImg">
						<image :src="data.image" class="collection-img"></image>
					</view>
				</view>
				<view class="stage flex-no-horizontal">
					<view class="f-large get-btn bold text-center" @click="handlClick">{{data.info}}</view>
					<view class="f-xs m-t-10 text-center grey">{{data.urlTip}}</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		convertCollection
	} from '../../api/collection.js'
	import {
		getConfigApi
	} from '@/api/bluetooth.js'
	import {
		saveImg
	} from '@/utility/download.js'
	export default {
		data() {
			return {
				code: '',
				isShowService: false,
				isShowAttested: false,
				isShowGet: false,
				data: {
					image: '',
					title: '', // 标题
					info: '', // btntip
					urlTip: '', // 跳转提示语
					jump: ''
				},
				configData: ''
			}
		},
		onLoad() {
			this.getConfig()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toConvert() {
				uni.navigateTo({
					url: `/pages/town/example/exchangeRecords`
				})
			},
			async getConfig() {
				try {
					const res = await getConfigApi()
					this.configData = res.data
				} catch (e) {
					//TODO handle the exception
				}
			},
			async convert() {
				try {
					if (!this.code) {
						uni.showToast({
							title: '请输入兑换码',
							icon: 'none'
						})
						return
					}
					if (!this.$store.state.userInfo.isAttested) {
						this.isShowAttested = true
						return
					}
					const res = await convertCollection({
						code: this.code
					})
					this.data.image = res.data.data.image_url
					this.data.title = res.data.data.title
					this.data.info = res.data.data.info
					this.data.urlTip = res.data.data.describe
					this.data.jump = res.data.data.jump
					this.isShowGet = true
				} catch (e) {
					console.log(e)
					if (e.code === 99) {
						this.isShowAttested = true
					} else {
						uni.showToast({
							title: e.message || e.data,
							icon: 'none'
						})
					}
					//TODO handle the exception
				}
			},
			handlClick() {
				this.isShowGet = false
				if (!this.data.jump) return
				console.log(111, this.data)
				if (!!~this.data.jump.indexOf('http') || !!~this.data.jump.indexOf('https')) {
					uni.navigateTo({
						url: '../index/outerChain?url=' + this.data.jump
					})
				} else {
					uni.navigateTo({
						url: this.data.jump
					})
				}
			},
			toPage() {
				uni.navigateTo({
					url: './realName'
				})
			},
			saveImage() {
				saveImg(this.configData.service_image)
			}
		}
	}
</script>

<style lang="scss">
	.convert-collection {
		height: 100%;
		position: relative;

		::v-deep.u-popup__content {
			background-color: transparent;
		}
		.titleName{
			position: relative;
			top: -100rpx;
			left: 0;
		}
		.textsBckImg{

		}
		.grey {
			opacity: 0.6;
		}

		.code-input {
			height: 90rpx;
			background: #F7F7F7;
			border-radius: 45rpx;
			padding: 0 40rpx;
			font-size: 14px;
		}

		.tip {
			position: absolute;
			left: 0;
			bottom: 100rpx;
			width: 100%;
			box-sizing: border-box;

			.tip-btn {
				width: 274rpx;
			}
		}

		.my-popup {
			width: 590rpx;
			box-sizing: border-box;
			padding: 45rpx 56rpx;
			position: relative;
			background-color: #ffffff;
			border-radius: 20rpx;

			.attested-icon {
				width: 174rpx;
				height: 174rpx;
			}

			.service-img {
				width: 269rpx;
				height: 269rpx;
			}

			.close {
				position: absolute;
				bottom: -90rpx;
				left: 50%;
				transform: translateX(-50%);
				opacity: 0.8;
			}
		}

		.get {
			background-color: transparent;
			color: white;
			position: relative;

			.title {
				color: #FFFFFF;
				background: linear-gradient(0deg, #FEE5BB 0%, #EDF4FF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}



			.stage {
				width: 464rpx;
				background: url('../../static/img/convert-collection-stage.png') no-repeat;
				background-size: 100%;
				height: 210rpx;
				justify-content: center;
				flex-direction: column;

				.get-btn {
					width: 343rpx;
					height: 80rpx;
					background: linear-gradient(180deg, #FFFFFF, #EDF4FF);
					border-radius: 40rpx;
					color: #000000;
					line-height: 80rpx;
				}
			}

			.light {
				display: flex;
				align-items: center;
				justify-content: center;
				.collectionImg{
					.collection-img {
						width: 342rpx;
						height: 342rpx;
					}
				}
				.lightImg{
					position: absolute;
					left: 0;
					right: 0;
					height: 600rpx;
					width: 600rpx;
					z-index: -1;
					animation: rotate 5s linear infinite;
					>image {
						width: 100%;
						height: 100%;
					}
				}
				@keyframes rotate {
					0% {
						transform: rotate(0)
					}

					100% {
						transform: rotate(360deg)
					}
				}


			}
		}
	}
</style>
